<template>
  <div
    id="tea-rare"
    :style="{ width: '400px', height: '400px' }"
  />
</template>

<script>
import { getTeaRare } from '@/api/home';
export default {
  data() {
    return {
      options: {
        title: {
          text: '用户饼状图', // 大标题
          subtext: '', // 类似于副标题
          x: 'center' // 标题位置   居中
        },
        tooltip: {
          trigger: 'item', // 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          formatter: '{a} <br/>{b} : {c} ({d}%)' // {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）用于鼠标悬浮时对应的显示格式和内容
        },
        legend: {
          // 图例组件。
          orient: 'vertical', // 图例列表的布局朝向
          left: 'left',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          // 系列列表。每个系列通过 type 决定自己的图表类型
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    };
  },
  created() {},
  mounted() {
    getTeaRare().then((res) => {
      console.log(res);
      this.options.series[0].data = res.data.data.map((item) => {
        return {
          name: item.province,
          value: item.rareNumber
        };
      });
      this.init();
    });
  },
  methods: {
    init() {
      const echarts = require('echarts');
      console.log(echarts);
      const myChart = echarts.init(document.getElementById('tea-rare'));
      // 绘制图表
      myChart.setOption(this.options);
    }
  }
};
</script>

<style>
</style>
